<template>
  <div>
    <van-search v-model="value" placeholder="按内容搜索" background="#ff6040" />
    <div class="sortList">
      <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item
          v-for="item in fristCate"
          :key="item.id"
          :title="item.catename"
        />
      </van-sidebar>
      <van-grid :border="false" :column-num="3">
        <van-grid-item
          :to="'/goodslist?id=' + item.id"
          v-for="item in secondList"
          :key="item.id"
        >
          <img :src="item.img ? $img + item.img : imgDefault" />
          <p>{{ item.catename }}</p>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getCateTree } from "@/util/axios";
export default {
  data() {
    return {
      value: "",
      activeKey: 0,
      fristCate: [],
      secondList: [],
    };
  },
  mounted() {
    //页面一加载获取分类树结构
    getCateTree().then((res) => {
      if (res.code == 200) {
        this.fristCate = res.list;
        this.secondList = res.list[0].children;
      }
    });
  },
  methods: {
    // 封装一个左侧切换事件
    onChange(n){
        this.secondList=this.fristCate[n].children
    },
  },
};
</script>

<style lang="" scoped>
.sortList {
  display: flex;
}
.van-grid {
  flex: 1;
  height: 1rem;
}
.van-grid-item img {
  width: 0.64rem;
  height: 0.64rem;
  margin-bottom: 0.05rem;
}

.van-grid-item p {
  text-align: center;
  font-size: 0.12rem;
  color: #c6c6c6;
}

.van-grid-item {
  margin-bottom: 0.1rem;
}
</style>